<template>
  <div class="category">
    <nav-bar class="nav-bar">
      <div slot="middle">分类</div>
    </nav-bar>
    <div class="content">
      <tab-menu :categories="categories" @selectItem="selectItem"></tab-menu>
      <scroll
        ref="scroll"
        class="tab-content"
        :probe-type="3"
        @scrollTop='scrollTop'
      >
        <tab-content :rightList="rightList"></tab-content>
        <tab-contral
          :tabs="['综合', '新品', '销量']"
          @getTabIndex="getTabIndex"
        ></tab-contral>
        <GoodsList :goodsList='showGoodsList'></GoodsList>
      </scroll>
    </div>
     <!-- 回到顶部按钮 -->
     <back-top v-show="isScrollTop" @click.native='detailToTop'></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import scroll from "components/common/Scroll/Scroll";
import BackTop from "components/coments/BackTop/BackTop";
import TabContral from "components/coments/Tabcontral/TabContral";
import GoodsList from '../../components/coments/GoodList/GoodsList'
import {backTopMixin}  from 'components/common/mixin'
import TabMenu from "./categoryComps/TabMenu";
import TabContent from "./categoryComps/TabContent";
// import TabContentDetail from "./categoryComps/TabContentDetail";
import { doc } from "components/common/untils";
import {
  getCategory,
  getSubcategory,
  getCategoryDetail,
} from "network/category";

export default {
  name: "Category",
  data() {
    return {
      categories: [],
      rightList: [],
      goods: {},
      currentIndex: -1,
      currentType: "pop",
    };
  },
  mixins: [backTopMixin],
  created() {
    //获取title数据
    this._getCategory();
    //   this._getSubcategory(this.index)
    //获取右侧下方detail数据
  },
  mounted() {
    //只有当组件渲染完才能拿到dom
    const refresh = doc(this.$refs.scroll.refresh, 50);
    this.$bus.$on("contentImageLoad", () => {
      refresh();
    });
    
    this.$bus.$on('itemImageLoad',()=>{
      refresh()
    })
  },
  activated () {
      this.$refs.scroll.refresh()
  },
  components: {
    NavBar,
    scroll,
    TabMenu,
    TabContent,
    BackTop,
    TabContral,
    // TabContentDetail,
    GoodsList
  },
  methods: {
    async _getCategory() {
      const res = await getCategory();
      this.categories = res.data.category.list;
      this._getSubcategory(0);
      for (let i = 0; i < this.categories.length; i++) {
        this.goods[i] = {
          categoryDetail: {
            pop: [],
            sell: [],
            new: [],
          },
        };
      }
    },
    selectItem(index) {
      this._getSubcategory(index);
    },
    //发送请求
    _getSubcategory(index) {
        // console.log(this.currentIndex);
        this.currentIndex = index
      const maitKey = this.categories[index].maitKey;
      getSubcategory(maitKey).then(res=>{
        this.rightList = res.data.list;
        this._getCategoryDetail("pop");
        this._getCategoryDetail("sell");
        this._getCategoryDetail("new");
      })
      
    },
   
    _getCategoryDetail(type) {
      const miniWallkey = this.categories[this.currentIndex].miniWallkey;
      getCategoryDetail(miniWallkey,type).then(res=>{
        this.goods[this.currentIndex].categoryDetail[type] = res
        this.goods={...this.goods}
      })
    },
    getTabIndex(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "sell";
          break;
        case 2:
          this.currentType = "new";
          break;
      }
      console.log(this.currentType);
    },
    scrollTop(position){
        this.isScrollTop = -position.y>1000
    }
    
  },
  computed: {
      showGoodsList(){
          if (this.currentIndex === -1) return []
          return this.goods[this.currentIndex].categoryDetail[this.currentType]
      }
  }
};
</script>

<style lang="less" scoped>
.category {
  height: 100vh;
}
.nav-bar {
  background-color: pink;
  font-weight: 700;
  color: #fff;
}

.content {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  display: flex;
}
.tab-content {
  height: 100%;
  flex: 1;
}
</style>
